<template>
  <view class="page">
    <view class="main-pic"></view>
    <view class="main">
      <view class="card">
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon.png')"
              mode="widthFix"
            />产品名称
          </view>
          <view class="card-item-value" style="text-align: right"
            >原生态大米</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon2.png')"
              mode="widthFix"
            />档案完整度
          </view>
          <view class="card-item-value" style="text-align: right"
            >原生态大米</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon3.png')"
              mode="widthFix"
            />产品品牌
          </view>
          <view class="card-item-value" style="text-align: right">硕然</view>
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon4.png')"
              mode="widthFix"
            />上市月份
          </view>
          <view class="card-item-value" style="text-align: right"
            >每年10月</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon5.png')"
              mode="widthFix"
            />产品简介
          </view>
          <view class="card-item-value"
            >有机水稻是草本类稻属植物粳、糯等谷
            物的统称。一般所说的稻子是指需要在
            水田种植的庄稼的总称，而本草上的稻 子专指糯米。
            “稻”字是从舀字转变过来的，而舀的本
            意恰恰就是一个人在石臼上舂米。因为
            它的口感又黏又软，所以又叫做糯米。
          </view>
        </view>
        <view class="btns">
          <view class="btn">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon6.png')"
              mode="widthFix"
            />购买
          </view>
          <view class="btn">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon7.png')"
              mode="widthFix"
            />合格证
          </view>
        </view>
      </view>
      <!-- 防伪查询 -->
      <view class="title">
        <image
          class="title-icon"
          :src="require('@/static/img/trace-icon8.png')"
          mode="widthFix"
        />防伪查询
      </view>
      <view class="input-card">
        <input class="input" placeholder="请输入刮开涂层的6位防伪码" />
        <view class="name">查询</view>
      </view>
      <!-- 产地信息 -->
      <view class="title">
        <image
          class="title-icon"
          :src="require('@/static/img/trace-icon9.png')"
          mode="widthFix"
        />产地信息
      </view>
      <view class="card">
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon14.png')"
              mode="widthFix"
            />企业名称
          </view>
          <view class="card-item-value" style="text-align: right"
            >某某有限公司</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon15.png')"
              mode="widthFix"
            />联系人
          </view>
          <view class="card-item-value" style="text-align: right">硕然</view>
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon16.png')"
              mode="widthFix"
            />联系方式
          </view>
          <view class="card-item-value" style="text-align: right"
            >每年10月</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon17.png')"
              mode="widthFix"
            />产地地址
          </view>
          <view class="card-item-value" style="text-align: right"
            >每年10月</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon17.png')"
              mode="widthFix"
            />产地位置
          </view>
        </view>
        <image src="" class="card-item-pic" mode="scaleToFill" />
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon5.png')"
              mode="widthFix"
            />产地环境
          </view>
        </view>
        <image src="" class="card-item-pic" mode="scaleToFill" />
      </view>
      <!-- 第三方检测 -->
      <view class="title">
        <image
          class="title-icon"
          :src="require('@/static/img/trace-icon10.png')"
          mode="widthFix"
        />第三方检测
      </view>
      <view class="card">
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon14.png')"
              mode="widthFix"
            />检测单位
          </view>
          <view class="card-item-value" style="text-align: right"
            >某某有限公司</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon18.png')"
              mode="widthFix"
            />检测日期
          </view>
          <view class="card-item-value" style="text-align: right">硕然</view>
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon19.png')"
              mode="widthFix"
            />检测项目
          </view>
          <view class="card-item-value" style="text-align: right"
            >每年10月</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon20.png')"
              mode="widthFix"
            />检测结果
          </view>
          <view class="card-item-value" style="text-align: right"
            >每年10月</view
          >
        </view>
        <view class="card-item">
          <view class="card-item-name">
            <image
              class="card-item-icon"
              :src="require('@/static/img/trace-icon20.png')"
              mode="widthFix"
            />检测报告
          </view>
        </view>
        <image src="" class="card-item-pic" mode="scaleToFill" />
      </view>
      <!-- 生产过程 -->
      <view class="title">
        <image
          class="title-icon"
          :src="require('@/static/img/trace-icon11.png')"
          mode="widthFix"
        />生产过程
      </view>
      <view class="card">
        <view class="card-name">追溯链</view>
        <view class="step">
          <view class="step-item" v-for="(item, index) in 3" :key="index">
            <image
              v-if="index == 0"
              :src="require('@/static/img/trace-icon21.png')"
              class="step-item-current_icon"
              mode="widthFix"
            />
            <view class="step-item-left">
              <view class="step-item-title">整地</view>
              <view class="step-item-text"
                ><image
                  class="step-item-icon"
                  :src="require('@/static/img/trace-icon12.png')"
                  mode="widthFix"
                />马莲花</view
              >
              <view class="step-item-text"
                ><image
                  class="step-item-icon"
                  :src="require('@/static/img/trace-icon13.png')"
                  mode="widthFix"
                />2016-04-05</view
              >
            </view>
            <image class="step-item-pic" src="" mode="scaleToFill" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f6f6f6;
  padding-bottom: 50rpx;
}
.main-pic {
  width: 100%;
  height: 435rpx;
  background: #ebb0b0;
  margin-bottom: 47rpx;
}
.main {
  padding: 0 25rpx;
}
.card {
  // height: 745rpx;
  background: #ffffff;
  box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.16);
  border-radius: 14rpx;
  padding: 50rpx 25rpx;
  margin-bottom: 50rpx;
  &-name {
    font-size: 26rpx;
    font-weight: bold;
    color: #202020;
    margin-bottom: 33rpx;
  }
  .step {
    border-left: 2px dotted #707070;
    &-item {
      padding-left: 33rpx;
      padding-right: 20rpx;
      padding-bottom: 30rpx;
      position: relative;
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: #666666;
      &-current_icon {
        position: absolute;
        left: -10rpx;
        top: 12rpx;
        width: 20rpx;
      }
      &-icon {
        width: 24rpx;
        margin-right: 7rpx;
      }
      &-left {
        flex: 1;
      }
      &-pic {
        width: 175rpx;
        height: 93rpx;
        background: #b81d1d;
      }
      &-title {
        font-weight: bold;
        color: #202020;
      }
      &-text {
        display: flex;
        align-items: center;
      }
    }
  }
  &-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 33rpx;
    &-icon {
      width: 28rpx;
      margin-right: 10rpx;
      margin-top: 2rpx;
    }
    &-name {
      width: 200rpx;
      display: flex;
      // align-items: center;
      font-size: 26rpx;
      font-weight: bold;
      color: #202020;
    }
    &-value {
      flex: 1;
      margin-left: 10rpx;
      font-size: 26rpx;
      color: #999999;
    }
    &-pic {
      width: 100%;
      height: 368rpx;
      background: #7d3434;
      margin-bottom: 40rpx;
    }
  }
  .btns {
    display: flex;
  }
  .btn {
    width: 179rpx;
    height: 70rpx;
    border-radius: 14rpx;
    border: 2rpx solid #1ac678;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26rpx;
    font-weight: bold;
    color: #1ac678;
    margin-right: 35rpx;
  }
}
.title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #000000;
  margin-bottom: 18rpx;
  &-icon {
    width: 61rpx;
    margin-right: 25rpx;
  }
}
.input-card {
  height: 105rpx;
  background: #ffffff;
  box-shadow: 0px 5px 11px 2px rgba(0, 0, 0, 0.16);
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28rpx;
  margin-bottom: 50rpx;

  .input {
    flex: 1;
    font-size: 26rpx;
  }
  .name {
    font-size: 26rpx;
    font-weight: bold;
    color: #1ac678;
  }
}
</style>
